<template>
    <div class="transfer">
        <el-row>
            <el-col :span="24">
                <el-cascader
                        :placeholder="palaceName"
                        :options="cascaderOption"
                        v-model="myValue"
                        filterable
                        style="width: 100%;"
                        @change="changeSelect"
                ></el-cascader>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    export default {
        props: {
            palaceName: {
                type: String,
                default: ''
            },
            value: {
                type: Number,
                default: null
            },
            cascaderOption: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                myValue: null
            }
        },
        created() {
        },
        watch: {
            value: function (value) {
                let self = this;
                self.cascaderOption.forEach(item1 => {
                    if (item1.children) {
                        item1.children.forEach(item2 => {
                            if (item1.children) {
                                item2.children.forEach(item3 => {
                                    if (item3.value === self.value) {
                                        self.myValue = [item1.value, item2.value, item3.value];
                                    }
                                })
                            }
                        });
                    }

                });
            },
            myValue: function (value) {
                    this.$emit('input', value[2]);
            }
        },
        methods: {
            changeSelect(value) {
                console.info('司机选择', value);
                if (value[0] == 'kong') {
                    this.myValue = [null,null,null];
                } else {
                    this.myValue = value;
                }

            }
        }
    }
</script>

<style scoped>
    /*.transfer {*/
    /*text-align: center;*/
    /*}*/
</style>
